<!-- 首页》左侧 v-show="item.show"-->
<template>
  <div :class="'homeLeft-container ' +($Ctl.isCs(true)?'cs-bg':'gradation-bg')">
    <div class="left-card">
      <div class="left-card-top">
        <!-- 多单位首页 -->
        <template v-if="isMuilUnitUser">
          <home-cards v-show="homeType == 1 && homeType != 3"></home-cards>
          <single-home-left v-if="homeType == 2 && homeType != 3 && active" :parames="singleParames"></single-home-left>
        </template>
        <!-- 单单位首页 -->
        <template v-else>
          <single-home-left v-if="active" v-show="homeType != 3" :parames="singleParames"></single-home-left>
        </template>
        <!-- 左边子页面 -->
        <child-left v-if="homeType == 3 && active" :parames="childParames"></child-left>
      </div>
      <div class="left-card-bottom">
        <!-- 左下角按钮组 -->
        <card-tools v-if="active" :homeType="homeType"></card-tools>
      </div>
    </div>
    <!-- 推送设置和地图工具包 -->
    <left-popup v-show="showLeftDialog" class="left-popup-dialog" :openLeftDialog="openLeftDialog"></left-popup>
  </div>
</template>

<script>
import HomeCards from "@/components/Home/LeftModel/HomeCards"; //多单位卡片
import SingleHomeLeft from "@/components/Home/LeftModel/SingleHomeLeft"; //单单位卡片
import ChildLeft from "@/components/Child/ChildLeft"; //左边子页面
import CardTools from "@/components/Cards/CardTools"; //工具栏目
import LeftPopup from "@/components/Popup/LeftMain"; //推送设置/地图工具包
export default {
  name: "HomeLeft",
  components: {
    HomeCards,
    SingleHomeLeft,
    ChildLeft,
    CardTools,
    LeftPopup,
  },
  data() {
    return {
      active: true,
      showLeftDialog: false, // 左侧弹窗
      homeType: 1, //1:多单位 2:单单位首页 3:左边子页面
      singleParames: {
        orgId: this.$store.state.userInfo.organizationIds,
        orgName: this.$store.state.userInfo.org.name,
      }, // 单单位首页参数
      childParames: {
        // pageName:'Inspection'
      }, // 子页面参数
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
    };
  },
  created: function () {
    let that = this;
    /**
     * @Author: Chili
     * @Description: 注册左边显示方法
     * @Date: 2019-07-25 16:57:26
     */
    window.FunList.changeLeftModelShow = that.changeModel;

    that.$Ctl.isCs() && that.$Cs.loadingControl(10401);
  },
  methods: {
    /*
     *  =======控制右侧显示内容方法=======
     * 【参数说明】：
     *    type -- 展示模块id（1：多单位； 2：单单位；3：子页面）
     *    parames -- 页面传递的参数，Object类型
     *    callback  --  回调（备用）
     */
    changeModel(type, parames, callback) {
      if (parames && type == 2) {
        this.singleParames = parames;
      }
      if (parames && type == 3) {
        if (this.homeType == type) {
          window.FunList.refreshChidLeft &&
            window.FunList.refreshChidLeft(parames);
        }
        this.childParames = parames;
      }
      // 显示对应的模块
      this.homeType = type || 1;
      // 更改工具栏展示内容
      window.FunList.changeToolsModelShow(
        this.homeType,
        parames ? parames.orgId || parames.orgIds : ""
      );
      if (parames && parames.isRefresh) {
        this.active = false;
        this.$nextTick(() => {
          this.active = true;
        });
      }
    },
    // 左侧弹框关闭显示
    openLeftDialog(flag) {
      this.showLeftDialog = flag || false;
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.homeLeft-container {
  display: flex;
  height: 100%;
  &.cs-bg {
    background-color: #000;
    //background: url(../../assets/images/csbg/bg-left.png) no-repeat 0 0/100%  100%;
  }
  &.gradation-bg {
    // background: -webkit-linear-gradient(to right, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.5), rgba(6, 23, 35, 0.3), rgba(6, 23, 35, 0)); /* Safari 5.1-6.0 */
    // background: -o-linear-gradient(to right, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.5), rgba(6, 23, 35, 0.3), rgba(6, 23, 35, 0)); /* Opera 11.1-12.0 */
    // background: -moz-linear-gradient(to right, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.5), rgba(6, 23, 35, 0.3), rgba(6, 23, 35, 0)); /* Firefox 3.6-15 */
    background: linear-gradient(
      to right,
      rgba(6, 23, 35, 0.9),
      rgba(6, 23, 35, 0.9),
      rgba(6, 23, 35, 0.8),
      rgba(6, 23, 35, 0.7),
      rgba(6, 23, 35, 0.5),
      rgba(6, 23, 35, 0.3),
      rgba(6, 23, 35, 0)
    ); /* 标准语法 */
  }
  .left-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 3%;
    .card-group {
      box-sizing: border-box;
      overflow: hidden;
    }
  }
  .left-card-top {
    width: 100%;
    height: calc(100% - 60px);
  }
  .left-card-bottom {
    width: 100%;
    height: 60px;
  }
  .left-popup-dialog {
    position: fixed;
    width: 360px;
    min-height: 360px;
    z-index: 1000;
    bottom: 8%;
    left: 50px;
  }
}
</style>
